import React from 'react';
import PropTypes from 'prop-types';
import {Button} from 'antd';
import {formatMessage} from './intl';
import ExcelImport from '../common/ExcelImport';
import fileTemplateZH from '../attachment/Claim import template(ZH).xlsx';
import fileTemplateEN from '../attachment/Claim import template(EN).xlsx';
import fileTemplatePT from '../attachment/Claim import template(PT).xlsx';
import routes from './routes';
import {Intl} from '@shsdt/web-intl';
const intl = new Intl();

const basePath = fetch.basePath || '';

class ImportPanel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {loading: false};
    }
    onChange = () => this.setState({loading: !this.state.loading});
    onReturn = () => this.props.history.push(routes.query.url());
    render() {
        let fileTemplate = '';
        if(intl.language === 'zh-CN')
            fileTemplate = fileTemplateZH;
        if(intl.language === 'pt-PT')
            fileTemplate = fileTemplatePT;
        if(intl.language === 'en-US')
            fileTemplate = fileTemplateEN;
        const fileSerialNo = (<span>{formatMessage({
            id: 'fileImport.step2.description3',
            defaultMessage: '模板列 File Serial No 规则示例：'
        })}<font size="4" color="#f5222d">13246</font>
        <font size="4" color="#1890ff">20201212</font>
        <font size="4" color="#52c41a">0001</font></span>);
        const description = [
            formatMessage({
                id: 'fileImport.step2.description1',
                defaultMessage: '红色标题列不能为空'
            }),
            formatMessage({
                id: 'fileImport.step2.description2',
                defaultMessage: '主清单通过 NO 关联'
            }),
            fileSerialNo
        ];
        return ([
            <div key="return" className="page-toolbar">
                <Button type="primary" onClick={this.onReturn} disabled={this.state.loading}>
                    {formatMessage({
                        id: 'fileImport.btm.return',
                        defaultMessage: '返回'
                    })}
                </Button>
            </div>,
            <ExcelImport
                action={`${basePath}/afterSales/api/v1/claims/import`}
                key="import"
                template={fileTemplate}
                description={description}
                templateName={formatMessage({
                    id: 'fileImport.templateName',
                    defaultMessage: '索赔单导入模板'
                })}
                beforeUpload={this.onChange}
                afterUpload={this.onChange} />
        ]);
    }
}

ImportPanel.propTypes = {
    history: PropTypes.object,
};

export default ImportPanel;
